<template>
  <div style="margin-left:8px;width:1070px;">
    <div class="gongdan-table-head-button">
      <div style="margin-right:10px;"><my-button :color="true">添加工单</my-button></div>
      <div style="margin-right:10px;"><my-button color="none">批量修改状态</my-button></div>
      <div style="margin-right:10px;"><my-button color="none">导出工单</my-button></div>
    </div>
    <div style="clear: both"></div>
    <div class="gongdan-table">
      <div class="gongdan-table-head">
        <div style="margin-right:13px;" v-for="sitem in selectItems" :key="sitem.name"><my-select :items="sitem.items" :ph="sitem.name"></my-select></div>
        <div style="margin:15px 13px 15px 0;"><my-date width="300"></my-date></div>
        <div style="margin:15px 13px 15px 0;"><my-search ph="请输入关键词搜索" width="370"></my-search></div>
      </div>
      <div class="gongdan-table-base-table">
        <base-table
          :mydata="workOrderList"
          :mytitle="mytitle"
          type="gd"
          checkbox="true"
        ></base-table>
        <div class="pages">
          <el-pagination
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, prev, pager, next, sizes, jumper"
            :total="400"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BaseTable from "@/components/MyTable/BaseTable";
import MyDate from "@/components/MyInput/MyDate";
import MySelect from "@/components/MyInput/MySelect";
import MySearch from "@/components/MyInput/MySearch";
import MyButton from "@/components/MyInput/MyButton";
export default {
  props: ["type"],
  components: {
    BaseTable,
    MyDate,
    MySelect,
    MySearch,
    MyButton
  },
  created() {
      console.log('type =')
      console.log(this.type)
    this.$axios.get("/workOrder").then((res) => {
      this.workOrderList = res.data.workOrderList;
    });
  },
  data() {
    return {
      workOrderList: [],
      mytitle: [
        {
          name: "工单ID",
          prop: "id",
          width: 98,
        },
        {
          name: "工单标题",
          prop: "title",
          width: 141,
        },
        {
          name: "工单渠道",
          prop: "channel",
          width: 141,
        },
        {
          name: "工单状态",
          prop: "status",
          width: 141,
        },
        {
          name: "客户姓名",
          prop: "customerName",
          width: 141,
        },
        {
          name: "最后更新时间",
          prop: "lastUpdateTime",
          width: 185,
        },
      ],
      date: "",
      search: "",
      selectItems: [
        {
          name: "全部状态",
          value: "",
          items: [
            {
              label: "全部状态",
              value: 0,
            },
            {
              label: "未分配",
              value: 1,
            },
            {
              label: "待处理",
              value: 2,
            },
            {
              label: "处理中",
              value: 3,
            },
            {
              label: "已解决",
              value: 4,
            },
            {
              label: "已关闭",
              value: 5,
            },
          ],
        },
        {
          name: "全部优先级",
          value: "",
          items: [
            {
              label: "全部优先级",
              value: 0,
            },
            {
              label: "低",
              value: 1,
            },
            {
              label: "中",
              value: 2,
            },
            {
              label: "高",
              value: 3,
            },
            {
              label: "紧急",
              value: 4,
            },
          ],
        },
        {
          name: "全部分类",
          value: "",
          items: [
            {
              label: "全部分类",
              value: 0,
            },
            {
              label: "分类一",
              value: 1,
            },
            {
              label: "分类二",
              value: 2,
            },
            {
              label: "分类三",
              value: 3,
            },
          ],
        },
        {
          name: "全部渠道",
          value: "",
          items: [
            {
              label: "全部渠道",
              value: 0,
            },
            {
              label: "手动录入",
              value: 1,
            },
            {
              label: "即时聊天",
              value: 2,
            },
            {
              label: "客户管理",
              value: 3,
            },
          ],
        },
        {
          name: "全部客服组",
          value: "",
          items: [
            {
              label: "全部",
              value: 0,
            },
            {
              label: "客服组一",
              value: 1,
            },
            {
              label: "客服组二",
              value: 2,
            },
            {
              label: "客服组三",
              value: 3,
            },
          ],
        },
        {
          name: "全部客服",
          value: "",
          items: [
            {
              label: "全部状态",
              value: 0,
            },
            {
              label: "王美美",
              value: 1,
            },
            {
              label: "七尾",
              value: 2,
            },
            {
              label: "李想",
              value: 3,
            },
            {
              label: "王志",
              value: 4,
            },
          ],
        },
      ],
    };
  },
};
</script>

<style>
.gongdan-table {
  background-color: #ffffff;
  padding: 10px 10px 50px;
  height: 108%;
  width: 1040px;
}

.gongdan-table-head-button {
  display: flex;
  float: right;
  margin: 0 0 8px;
}

.gongdan-table-head {
  display: flex;
  flex-wrap: wrap;
}

.gongdan-table-head .el-select {
  width: 160px;
}
</style>